<template>
    <view class="healthData">
        <view class="top_canvas" :style="{ alignItems: partMsg.id != 0 ? 'start' : 'center' }">
            <view>
                <view class="box" style="margin-bottom: 20rpx;" v-if="partMsg.id != 0">
                    <view style="color: #0091ff;font-size: 28rpx;font-weight: 500;margin-top: 12rpx;margin-bottom: 4rpx;">
                        {{ partMsg.topName }}
                    </view>
                    <view style="font-size: 20rpx;">位置</view>
                </view>
                <view class="box" style="height: 100rpx;">
                    <view style="color: #0091ff;font-size: 28rpx;font-weight: 500;margin-top: 12rpx;margin-bottom: 4rpx;">
                        {{ userYear || '-' }}
                    </view>
                    <view style="font-size: 20rpx;">已使用</view>
                </view>
            </view>
            <view style="width: 360rpx;height: 360rpx;">
                <l-echart class="ring" ref="d1"></l-echart>
            </view>
            <view class="box" v-if="unDisposeCounts" style="font-size: 24rpx;" @click="toPitfall(1)">
                <image src="@/static/images/tipjg.png"></image>
                <view>需及时</view>
                <view>处理隐患</view>
            </view>
            <view class="box" style="background: #fff;" v-else></view>
        </view>
        <view class="content" v-if="partMsg.id != 0">
            <image :src="eleUrl"></image>
            <view>
                <view v-for="(item, index) in cardList" :key="index" class="card partCard">
                    <view class="line"></view>
                    <view style="display: flex;justify-content: space-between;align-items: center;">
                        <view style="font-size: 28rpx;">{{ item.label }}</view>
                        <view class="score"
                            :style="{ color: (item.score <= 75 && item.score > 60) ? '#F8AE00' : item.score <= 60 ? '#FF375A' : item.score <= 100 ? '' : '' }">
                            {{ item.score || 60 }}
                        </view>
                    </view>
                    <view>待处理隐患
                        <text style="font-size: 28rpx;margin-left: 10rpx;">{{ item.perilous || 0 }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="content" v-else>
            <view v-for="(item, index) in cardList" :key="index" class="card" @click="toPitfall(item.perilous)">
                <view style="font-size: 28rpx;">{{ item.label }}</view>
                <view class="score"
                    :style="{ color: (item.score <= 75 && item.score > 60) ? '#F8AE00' : item.score <= 60 ? '#FF375A' : item.score <= 100 ? '#6585E4' : '' }">
                    {{ item.score || 60 }}
                </view>
                <view>待处理隐患</view>
                <view style="font-size: 28rpx;">{{ item.perilous || 0 }}</view>
            </view>
        </view>
        <view class="list">
            <view class="title">最近状态
                <text>(最近1个月的工单状态)</text>
                <view style="color: #666666;font-weight: normal;font-size: 26rpx;margin-top: 20rpx;">任务({{
                    elevatorList.length }})
                </view>
            </view>
            <template v-if="partMsg.id != 0">
                <view v-for="(item) in elevatorList" :key="item.id" class="cardItem">
                    <view class="time">{{ item.createTime }}</view>
                    <view class="line"></view>
                    <view class="desc">
                        <view class="desc_box">
                            <text class="label">{{ item.checkName }}:</text>
                            <text>{{ item.workName }}</text>
                        </view>
                        <view class="desc_box" v-if="item.typeStatus == 1">
                            <text class="label">保养结果:</text>
                            <text v-if="item.result != null" :style="{ color: item.result == 1 ? '#6BC013' : '#E02020' }">
                                {{ item.result == 1 ? '正常' : '异常' }}</text>
                            <text v-else>
                                <text v-for="(i, k) in item.recordData.options" :index="k" v-if="i.default"
                                    :style="{ color: i.result == 1 ? '#6BC013' : '#E02020' }">
                                    {{ i.name }}
                                </text>
                            </text>
                        </view>
                        <view class="desc_box" v-if="item.disposeDesc">
                            <text class="label">{{ partLabelList[item.typeStatus - 1].title }}:</text>
                            <text>{{ item.disposeDesc }}</text>
                        </view>
                        <view class="desc_box" v-if="item.typeStatus == 1 && item.recordDataValues">
                            <view style="margin-top: 10rpx;border-bottom: 2rpx solid #eee;"
                                v-for="(it, k) in item.recordDataValues" :key="k">
                                <text class="label">{{ item.recordDataValues.length == 1 ? '记录' : '记录' + (i + 1) }}:</text>
                                <text>{{ it.remarks.val }}</text>
                                <view style="margin: 10rpx 0;">
                                    <image v-for="(i, j) in it.files.val" :key="j" :src="i.type == 'image'
                                        ? i.url : '/static/images/video.png'"
                                        @click.stop="preViewFile(it.files.val, j)">
                                    </image>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
            <template v-else>
                <eleItem-list :isListSty="true" v-for="(e, i) in elevatorList" :key="i" :item="e" :tabIdx="e.typeStatus - 1"
                    :typeIdx="iscomplete" :childIdx="i" :elevatorId="elevatorId" @update="restList()"
                    @userMore="handleUserMore">
                </eleItem-list>
            </template>
            <view class="none-block" v-if="elevatorList.length == 0">
                <view class="img">
                    <image src="@/static/images/default.png"></image>
                </view>
                <view class="text">- 暂无相关数据 -</view>
            </view>
        </view>
    </view>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
import { getElevatorHealthInfo } from '@/apis/elevator.js';
import OrderList from '../components/eleOrderList.vue';
import { liquidFill } from '@/utils/chart_opt.js';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import eleItemList from '../components/eleItemList.vue';
export default {
	components: {
		LEchart,
		OrderList,
		eleItemList
	},
	onReady() {
		// console.log(echarts.version);
		this.initData();
	},
	props: {
		elevatorId: {
			type: String
		},
		partMsg: {
			type: Object,
			default: ()=>{
				return {};
			}
		},
		eleMsg: {
			type: Object,
			default: ()=>{
				return {};
			}
		}
	},
	watch: {
		partMsg(newVal) {
			this.initData();
		}
	},
	computed: {
		eleUrl() {
			if (this.partMsg.id != 0) {
				if (this.partMsg.routeNmae.indexOf('机房') != -1) {
					return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/b24cf08b0405466c07706bb1dbc9ebdb.png';
				} else if (this.partMsg.routeNmae.indexOf('楼层') != -1) {
					return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/f73390d25b557f686bc9cefc706db3ff.png';
				} else if (this.partMsg.routeNmae.indexOf('轿厢') != -1) {
					return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/9e85df21b8c7761c8a18a90db804c7d7.png';
				} else if (this.partMsg.routeNmae.indexOf('/底坑') != -1) {
					return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/955f3f075bf7dfdd8f3b1788e0c9f68c.png';
				} else if (this.partMsg.routeNmae.indexOf('/井道') != -1) {
					return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/422145f8d9f6fb43e32e590aa4c8068f.png';
				} else {
					return 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/b24cf08b0405466c07706bb1dbc9ebdb.png';
				}
			}
		}
	},
	data() {
		return {
			iscomplete: '', // 是否为已完成工单
			healthScore: '', // 健康分
			userYear: '', // 使用年限
			unDisposeCounts: '', // 总待处理
			cardList: [{
				perilous: 0, // 隐患
				key: 'faceScore',
				label: '外观/清洁',
				score: 0,
			},
			{
				perilous: 0, // 隐患
				key: 'functionalScore',
				label: '功能/调整',
				score: 0,
			},
			{
				perilous: 0, // 隐患
				key: 'lubricatingScore',
				label: '润滑',
				score: 0,
			},
			{
				perilous: 0, // 隐患
				key: 'measurementScore',
				label: '测量',
				score: 0,
			}],
			d1: {
				colors: ['#F47D99', '#6FA9FF',],
				colorsCopy: ['#F47D99', '#6FA9FF',],
				count: 0,
				toopDesc: true,
				linedata: {
					categories: [],
					series: [],
				},
				chartData: {
					series: [],
				},
				tooplState1: false,// tooltip状态
				toopText1: false,// 返回按钮
				desc: false,
				toolObj1: {},
				value1: '',
				value2: '',
			},
			elevatorList: [],
			partLabelList: [{
				title: '保养记录'
			},
			{
				title: '维修记录'
			},
			{
			},
			{
				title: '维修记录'
			}
			]
		};
	},
	methods: {
		// 绘制水球图
		setRingChart(chart, data) {  // 绘制水球图
			this[chart].opts = liquidFill(data);
			this.$nextTick(() => {
				if (!this.$refs[chart]) {
					return;
				}
				this.$refs[chart].init(echarts, chartF => {
					console.log('echarts', echarts, chartF);
					chartF.setOption(this[chart].opts, true);
				});
			});
		},
		initData() {
			getElevatorHealthInfo({
				elevatorId: this.elevatorId,// '1000000000000000120',//    
				partId: this.partMsg.id == 0 ? '' : this.partMsg.id,
			}).then(res => {
				let { healthScore, unDisposeCounts, status, userYear, list, workVoList } = res.data;
				this.healthScore = healthScore;
				this.unDisposeCounts = unDisposeCounts;
				this.userYear = userYear;
				this.iscomplete = status;
				if (this.partMsg.id == 0) {
					this.elevatorList = list;
				} else {
					this.elevatorList = workVoList;
				}
				this.elevatorList.forEach(item => {
					if (item.partName) {
						let name = item.partName.replaceAll('&amp;&amp;', '/');
						item.allPartName = name;
						item.partName = name.slice(name.lastIndexOf('/') + 1);
					}
				});
				for (const key in res.data) {
					this.cardList.forEach(item => {
						if (key == item.key) {
							item.score = res.data[key];
							item.perilous = res.data[key + 'Counts'];
						}
					});
				}
				this.setRingChart('d1', { healthScore, unDisposeCounts, status });
			});
		},
		handleUserMore(res) {
			const { parentIdx, childIdx, val } = res;
			this.elevatorList[parentIdx].usermore = val;
		},
		// 预览
		preViewFile(list, index) { 
			this.$previewMedia({
				sources: list,
				current: index,
			});
		},
		// 整梯隐患
		toPitfall(e) {
			if (e == 0) return;
			let list = this.elevatorList.filter(item => item.typeStatus == 2 || item.typeStatus == 4);
			uni.setStorageSync('pitfall', {
				eleMsg: this.eleMsg,
				list
			});
			uni.navigateTo({
				url:
                    '/pageModules/projectInfo/componentsDetail/pitfall'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.healthData {
    background-color: #f6f5f8;
    padding-bottom: 60rpx;

    .top_canvas {
        background-color: #fff;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .box {
            background: #f6f8fc;
            border-radius: 16rpx;
            width: 100rpx;
            padding: 10rpx 8rpx;
            font-size: 24rpx;
            text-align: center;
            color: #666666;

            image {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }

    .content {
        display: flex;
        padding: 20rpx;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 0px 0px 32rpx 32rpx;

        image {
            width: 220rpx;
            height: 642rpx;
        }

        .card {
            padding: 20rpx 10rpx;
            width: 140rpx;
            height: 200rpx;
            background: #f6f8fc;
            border-radius: 24rpx;
            font-size: 24rpx;
            color: #666;
            text-align: center;

            .score {
                font-size: 48rpx;
                color: #6585E4;
                font-weight: 700;
                margin: 10rpx 0;
            }
        }

        .partCard {
            width: 376rpx;
            height: 138rpx;
            text-align: left;
            padding: 10rpx 20rpx;
            margin-bottom: 20rpx;
            border-radius: 24rpx 0px 0px 24rpx !important;
            position: relative;

            .line {
                width: 8rpx;
                height: 158rpx;
                background: #6585e4;
                border-radius: 24rpx 0px 0px 24rpx;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }

    .list {
        padding: 20rpx;

        .title {
            font-size: 28rpx;
            color: #333333;
            font-weight: bold;

            text {
                color: #999999;
                font-size: 24rpx;
                font-weight: normal;
            }
        }

        .cardItem {
            background: #fff;
            margin-top: 10rpx;
            margin-bottom: 30rpx;
            border-radius: 8rpx;
            box-shadow: 0px 2rpx 18rpx 0px rgba(0, 0, 0, 0.07);
            padding: 20rpx 0;

            .time {
                color: #999999;
                font-size: 24rpx;
                padding-left: 20rpx;
            }

            .line {
                margin: 20rpx 0;
                width: 100%;
                height: 2rpx;
                background: #eee;
            }

            .desc {
                padding-left: 20rpx;

                &_box {
                    font-size: 26rpx;
                    color: #666;
                    margin: 20rpx 0;

                    image {
                        width: 112rpx;
                        height: 112rpx;
                        margin-right: 20rpx;
                    }

                    .label {
                        display: inline-block;
                        width: 140rpx;
                    }
                }
            }
        }

        .none-block {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 250rpx;
            padding-top: 120rpx;

            .img {
                image {
                    width: 64rpx;
                    height: 64rpx;
                }
            }

            .text {
                width: 100%;
                color: #999999;
                font-size: 26rpx;
            }
        }
    }
}
</style>